<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width='800'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
    <a-form
      layout='horizontal'
      ref='form'
      :model='form'
      :rules='rules'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >

      <a-form-item label='牧场名称:' name='ranchName'>
        <a-input v-model:value='form.ranchName' placeholder='请输入牧场名称' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='牧场简称:' name='shortRanchName'>
        <a-input v-model:value='form.shortRanchName' placeholder='请输入牧场简称' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='牧场地址:' name='address'>
        <a-input v-model:value='form.address' placeholder='请输入牧场地址' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='创办时间:' name='establishTime'>
        <a-date-picker v-model:value="form.establishTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"  placeholder='请输入创办时间' allow-clear autocomplete='off'/>
      </a-form-item>
      <a-form-item label="所属公司或者部门:" name="orgId">
        <a-tree-select
          v-model:value="form.orgId"
          style="width: 100%"
          :tree-data="orgList"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择上级机构"
          :field-names="{ children: 'children', title: 'title', key: 'id', value: 'id' }"
          allow-clear
          tree-default-expand-all
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { RanchApi } from '@/api/property/RanchApi';
import { UserApi } from '@/api/system/user/UserApi';
import { message } from 'ant-design-vue';

export default {
  name: 'RanchEdit',
  components: {
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  created() {
    if (this.data) {
      this.form = Object.assign({}, this.data);
      this.isUpdate = true;
    } else {
      this.isUpdate = false;
    }
  },
  async mounted() {
    this.orgList = await UserApi.getOrgTeeList();
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        ranchName: [{ required: true, message: '请输入地址', type: 'string', trigger: 'blur' }],
        orgId:[{required: true, message: '请选择组织架构内的牧场', type: 'string', trigger: 'blur'}],
        address: [{ required: true, message: '请输入地址', type: 'string', trigger: 'blur' }],
        shortRanchName: [{ required: true, message: '请输入简称', type: 'string', trigger: 'blur' }, {type: 'string', min: 4, max: 5, message: '长度在 4 到 6 个字符', trigger: 'blur'}],
        establishTime: [{ required: true, message: '请输入创办时间', type: 'string', trigger: 'blur' }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      orgList : [],
    };
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author cancan
     * @date 2022/05/28 16:32
     */
    async save() {
      console.log(this.form);
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;

      let result = null;

      // 执行编辑或修改
      if (this.isUpdate) {
        result = RanchApi.edit(this.form);
      } else {
        result = RanchApi.add(this.form);
      }
      result
        .then(result => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          message.success(result.message);

          // 如果是新增，则form表单置空
          if (!this.isUpdate) {
            this.form = {};
          }

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);

          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2022/05/28 16:32
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>
